<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>小程序详情</span>
                <el-link type="warning"
                         size="small"
                         href="https://mp.weixin.qq.com/cgi-bin/loginpage"
                         target="_blank">
                    微信后台登录
                </el-link>
                <el-link type="warning"
                         size="small"
                         href="https://kf.qq.com/faq/200703maI3qE200703FnaeeY.html"
                         target="_blank">
                    如何关联邮箱
                </el-link>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         size="small" label-position="left">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button size="small" type="success" @click="modifyName">
                                    设置名称
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="modifySignature">
                                    设置介绍
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="modifyAvatar">
                                    设置头像
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="funcSet">
                                    功能设置
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="addTrialUser">
                                    添加体验用户
                                </el-button>
                            </el-form-item>
                            <el-form-item v-if="miniProgramInfo.canDelete">
                                <el-button size="small" type="danger" @click="deleteMnp">
                                    删除
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="9" border size="small">
                <el-descriptions-item label="名称">
                    {{ miniProgramInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item label="功能介绍">
                    {{ miniProgramInfo.signature }}
                </el-descriptions-item>
                <el-descriptions-item label="主体名称">
                    {{ miniProgramInfo.principalName }}
                </el-descriptions-item>
                <el-descriptions-item label="小程序APP_ID">
                    {{ miniProgramInfo.appId }}
                </el-descriptions-item>
                <el-descriptions-item label="开放平台APP_ID">
                    {{ miniProgramInfo.openAppId }}
                </el-descriptions-item>
                <el-descriptions-item label="第三方平台APP_ID">
                    {{ miniProgramInfo.componentAppId }}
                </el-descriptions-item>
                <el-descriptions-item label="访问状态">
                    <el-switch
                        v-model="mnpDetail.visitStatus == 1"
                        @change="changeVisitStatus"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-descriptions-item>
                <el-descriptions-item label="搜索状态">
                    <el-switch
                        v-model="mnpDetail.searchStatus == 0"
                        @change="changeSearchStatus"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-descriptions-item>
                <el-descriptions-item label="头像">
                    <div>
                        <el-avatar :src="miniProgramInfo.headImg"></el-avatar>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="二维码">
                    <div>
                        <el-button type="text" @click="showQrcode" size="small">点击查看</el-button>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="腾讯地图KEY">
                    {{ mnpSettingInfo.mapKey }}
                </el-descriptions-item>
                <el-descriptions-item label="腾讯地图样式">
                    {{ mnpSettingInfo.mapStyle }}
                </el-descriptions-item>
                <el-descriptions-item label="品牌名称">
                    {{ mnpSettingInfo.brand }}
                </el-descriptions-item>
                <el-descriptions-item label="品牌Slogan">
                    {{ mnpSettingInfo.slogan }}
                </el-descriptions-item>
                <el-descriptions-item label="体验用户">
                    <el-tag
                        type="success"
                        size="small"
                        :key="trialUser.userStr"
                        v-for="trialUser in mnpDetail.trialUsers"
                        closable
                        :disable-transitions="false"
                        @close="removeTrialUser(trialUser)">
                        {{ trialUser.wechatId }}
                    </el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-tabs v-model="activeName">
            <el-tab-pane label="版本管理" name="version">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>版本信息</span>
                    </div>
                    <div>
                        <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix=""
                                 label-width="100px"
                                 size="small" label-position="left">
                            <el-row>
                                <el-col :span=6>
                                    <el-form-item label="模板ID" prop="templateId">
                                        <el-input v-model="condition.search.templateId"
                                                  placeholder="ID"
                                                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span=6>
                                    <el-form-item label="正式版审核ID" prop="auditId">
                                        <el-input v-model="condition.search.auditId"
                                                  placeholder="正式版审核ID"
                                                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span=6>
                                    <el-form-item label="正式版状态" prop="auditStatus">
                                        <el-select v-model="condition.search.auditStatus"
                                                   placeholder="正式版状态">
                                            <el-option label="审核成功"
                                                       value="0"></el-option>
                                            <el-option label="审核被拒"
                                                       value="1"></el-option>
                                            <el-option label="审核中"
                                                       value="2"></el-option>
                                            <el-option label="已撤回"
                                                       value="3"></el-option>
                                            <el-option label="审核延后"
                                                       value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span=6>
                                    <el-form-item label="是否发布" prop="releaseStatus">
                                        <el-select v-model="condition.search.releaseStatus"
                                                   placeholder="是否发布">
                                            <el-option label="未发布"
                                                       value="0"></el-option>
                                            <el-option label="已发布"
                                                       value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item>
                                        <el-button size="small" type="primary" @click="getVersionData">查询</el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="primary" @click="reset">重置</el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="trial">
                                            1发布体验版
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="getTrialCode">
                                            2获取体验版二维码
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="settingPrivacy">
                                            3设置隐私保护
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="submitAudit">
                                            4提交正式版审核
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="queryAuditStatus">
                                            5查询审核结果
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="release">
                                            6发布上线
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="revokeAudit">
                                            7撤回审核
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" type="success" @click="speedUpAudit">
                                            8加急审核
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div>
                        <span class="el-form-item__label" style="margin-top: -15px; text-decoration: underline;">第一行代表最新的体验版，原来上传的体验版都将失效！</span>
                    </div>
                    <el-table
                        id="mainTable"
                        :data="versionData"
                        size="small"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="templateId" width="60px" label="模板ID"></el-table-column>
                        <el-table-column prop="extJson" label="额外参数"></el-table-column>
                        <el-table-column label="体验版" align="center">
                            <el-table-column prop="trialVersion" label="版本号"></el-table-column>
                            <el-table-column prop="trialDesc" align="center" width="140px"
                                             label="描述信息"></el-table-column>
                            <el-table-column prop="trialSubmitTime" label="提交时间"></el-table-column>
                        </el-table-column>
                        <el-table-column label="正式版" align="center">
                            <el-table-column prop="auditId" width="85px" label="审核ID"></el-table-column>
                            <el-table-column prop="auditStatus" :formatter="formatAuditStatus"
                                             label="审核状态"></el-table-column>
                            <el-table-column prop="auditDesc" align="center" width="140px"
                                             label="描述信息"></el-table-column>
                            <el-table-column prop="auditSubmitTime" label="提交时间"></el-table-column>
                            <el-table-column prop="auditResultTime" label="结果时间"></el-table-column>
                            <el-table-column prop="auditFailReason" label="失败原因">
                                <template v-slot="scope">
                                    <table-popover :text=scope.row.auditFailReason
                                                   v-if="scope.row.auditFailReason"></table-popover>
                                </template>
                            </el-table-column>
                            <el-table-column prop="auditSpeedUpFlag" align="center" width="70px" label="是否加急"
                                             :formatter="formatBoolean"></el-table-column>
                            <el-table-column prop="autoRelease" align="center" width="70px" label="自动发布">
                                <template v-slot="scope">
                                    <el-switch
                                        v-model="scope.row.autoRelease"
                                        @change="switchAutoRelease(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column
                            prop="releaseStatus"
                            :formatter="formatReleaseStatus"
                            label="是否发布">
                        </el-table-column>
                        <el-table-column
                            prop="releaseTime"
                            label="发布时间">
                        </el-table-column>
                        <el-table-column
                            prop="updateTime"
                            label="更新时间">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            fixed="right"
                            align="center"
                            width="60px">
                            <template v-slot="scope">
                                <div>
                                    <el-button @click="onDeleteVersion(scope.row)" type="text" size="small">删除
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        small
                        :hide-on-single-page="true"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="condition.page"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size.sync="condition.rows"
                        layout="sizes, prev, pager, next"
                        :total.sync="condition.total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="类目管理" name="category">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>类目信息</span>
                        <el-button type="text" size="mini" @click="setCategory">
                            设置类目
                        </el-button>
                    </div>
                    <el-table
                        id="mainTable"
                        :data="mnpCategories"
                        border
                        size="mini"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="first" label="一级类目ID"></el-table-column>
                        <el-table-column prop="firstName" label="一级类目名称"></el-table-column>
                        <el-table-column prop="second" label="二级类目ID"></el-table-column>
                        <el-table-column prop="secondName" label="二级类目名称"></el-table-column>
                        <el-table-column prop="auditStatus" label="审核状态"
                                         :formatter="formatCategoryStatus"></el-table-column>
                        <el-table-column prop="auditReason" label="审核不通过原因"></el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="隐私管理" name="privacy">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>隐私接口</span>
                        <el-link type="primary"
                                 size="small"
                                 href="https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/privacy-api-management/applyPrivacyInterface.html"
                                 target="_blank">
                            查看说明
                        </el-link>
                    </div>
                    <el-table
                        id="mainTable"
                        :data="mnpLocationInterfaces"
                        border
                        size="mini"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="apiName" label="API英文名"></el-table-column>
                        <el-table-column prop="apiChName" label="API中文名"></el-table-column>
                        <el-table-column prop="groupName" label="分组名" width="100px"></el-table-column>
                        <el-table-column prop="status" label="审核状态" width="120px"
                                         :formatter="formatPrivacyStatus"></el-table-column>
                        <el-table-column prop="groupName" label="文档" width="100px">
                            <template v-slot="scope">
                                <el-link type="primary"
                                         :href="scope.row.apiLink"
                                         target="_blank">
                                    查看说明
                                </el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="failReason" label="审核不通过原因"></el-table-column>
                        <el-table-column
                            label="操作"
                            fixed="right"
                            width="60">
                            <template v-slot="scope">
                                <div>
                                    <el-button @click="applyLocation(scope.row)" type="text" size="small">申请
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="订阅管理" name="subscribe">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>订阅消息模版</span>
                        <el-button type="text" size="mini" @click="syncSubscribeTemplate">
                            同步
                        </el-button>
                        <el-button type="text" size="mini" @click="setSubscribeTemplate">
                            一键配置
                        </el-button>
                    </div>
                    <el-table
                        id="subscribeTable"
                        :data="subscribeMessageTemplates"
                        border
                        size="mini"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="priTmplId" label="模版ID"></el-table-column>
                        <el-table-column prop="title" label="模版标题"></el-table-column>
                        <el-table-column prop="content" label="模版内容"></el-table-column>
                        <el-table-column prop="example" label="内容示例"></el-table-column>
                        <el-table-column prop="type" label="模版类型" :formatter="formatTemplateType"></el-table-column>
                        <el-table-column prop="tid" label="模板标题ID"></el-table-column>
                        <el-table-column prop="key" label="唯一KEY值"></el-table-column>
                        <el-table-column
                            label="操作"
                            fixed="right"
                            width="60">
                            <template v-slot="scope">
                                <div>
                                    <el-button @click="onDeleteSubscribeTemplate(scope.row)" type="text" size="small">删除
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="插件管理" name="plugin">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>插件列表</span>
                        <el-button type="text" size="mini" @click="pluginDialogVisible = true">
                            新增插件
                        </el-button>
                    </div>
                    <el-table
                        id="pluginTable"
                        :data="plugins"
                        border
                        size="mini"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="appid" label="插件AppID"></el-table-column>
                        <el-table-column prop="nickname" label="插件昵称"></el-table-column>
                        <el-table-column prop="headImgUrl" label="插件头像">
                            <template v-slot="scope">
                                <img :src="scope.row.headImgUrl" alt="" style="width: 60px;height: 60px">
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="插件状态"
                                         :formatter="formatPluginStatus"></el-table-column>
                        <el-table-column
                            label="操作"
                            fixed="right"
                            width="80">
                            <template v-slot="scope">
                                <div>
                                    <el-button @click="unbindPlugin(scope.row)" type="text" size="small">解绑
                                    </el-button>
                                    <el-button @click="updatePlugin(scope.row)" type="text" size="small">更新
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="域名管理" name="domain">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>域名信息</span>
                        <el-link type="primary"
                                 size="small"
                                 href="https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/product/domain.html"
                                 target="_blank">
                            配置说明
                        </el-link>
                        <el-button type="text" size="mini" @click="quickConfigDomain">
                            一键配置
                        </el-button>
                        <el-button type="text" size="mini" @click="domainConfig">手动配置
                        </el-button>
                    </div>
                    <el-descriptions title="" direction="vertical" :column="7" border size="small">
                        <el-descriptions-item label="Request域名*">
                            {{ mnpDetail.requestDomain }}
                        </el-descriptions-item>
                        <el-descriptions-item label="Socket域名">
                            {{ mnpDetail.socketDomain }}
                        </el-descriptions-item>
                        <el-descriptions-item label="Upload域名*">
                            {{ mnpDetail.uploadDomain }}
                        </el-descriptions-item>
                        <el-descriptions-item label="Download域名">
                            {{ mnpDetail.downloadDomain }}
                        </el-descriptions-item>
                        <el-descriptions-item label="UDP域名">
                            {{ mnpDetail.udpDomain }}
                        </el-descriptions-item>
                        <el-descriptions-item label="TCP域名">
                            {{ mnpDetail.tcpDomain }}
                        </el-descriptions-item>
                        <el-descriptions-item label="Webview域名*">
                            {{ mnpDetail.webviewDomain }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="开发信息" name="develop">
                <el-descriptions title="" direction="vertical" :column="2" border size="small">
                    <el-descriptions-item label="基础信息">
                        {{ miniProgramInfo.accountBasicInfo }}
                    </el-descriptions-item>
                    <el-descriptions-item label="账号信息">
                        {{ miniProgramInfo.authorizerInfo }}
                    </el-descriptions-item>
                    <el-descriptions-item label="授权信息">
                        {{ miniProgramInfo.authorizationInfo }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="设置名称" width="40%" :visible.sync="modifyNameDialogVisible">
            <el-form :model="modifyNameForm" label-width="120px" size="small">
                <el-form-item label="新的名称">
                    <el-input v-model="modifyNameForm.name"
                              placeholder="请输入新的名称"></el-input>
                    <div class="form-tips">{{ modifyNameTips }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyNameDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="modifyNameConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="设置类目" width="40%" :visible.sync="setCategoryDialogVisible">
            <el-form :model="setCategoryForm" label-width="120px" size="small">
                <el-form-item label="选择类目">
                    <el-select v-model="setCategoryForm.category" placeholder="选择类目">
                        <el-option label="软件/建站/技术开发" value="402-1273"></el-option>
                        <el-option label="餐饮服务场所/餐饮服务管理企业" value="220-632"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传餐饮许可证" v-if="setCategoryForm.category == '220-632'">
                    <el-button @click="selectAlbumDialogVisible = true" size="small" type="success">
                        选择图片
                    </el-button>
                    <div v-if="selectedAlbum.id" style="margin-top: 10px">
                        <media-show :url="selectedAlbum.url"></media-show>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="form-tips">{{ setCategoryTips }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setCategoryDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setCategoryConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="申请权限" width="40%" :visible.sync="applyLocationDialogVisible">
            <el-form :model="applyLocationForm" label-width="120px" size="small">
                <el-form-item label="申请原因">
                    <el-input v-model="applyLocationForm.content" placeholder="请输入申请原因"
                              type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="申请截图">
                    <el-input v-model="applyLocationForm.picUrls" placeholder="请输入图片链接，多个用逗号分隔"
                              type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="applyLocationDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="applyLocationConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="功能设置" width="40%" :visible.sync="funcDialogVisible">
            <el-form :model="funcForm" label-width="120px" size="small">
                <el-form-item label="腾讯地图KEY">
                    <el-input v-model="funcForm.mapKey"
                              placeholder="请输入腾讯地图KEY"></el-input>
                </el-form-item>
                <el-form-item label="腾讯地图样式">
                    <el-input v-model="funcForm.mapStyle"
                              placeholder="请输入腾讯地图样式"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="funcForm.brand"
                              placeholder="请输入品牌名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌Slogan">
                    <el-input v-model="funcForm.slogan"
                              placeholder="请输入品牌Slogan"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="funcDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="funcSetConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="设置头像" width="40%" :visible.sync="modifyAvatarDialogVisible">
            <el-form :model="modifyAvatarForm" label-width="120px" size="small">
                <el-form-item label="上传头像">
                    <el-upload
                        ref="upload"
                        action=""
                        list-type="picture"
                        :multiple="false"
                        :limit="1"
                        :auto-upload="false"
                        accept="image/png,image/jpg,image/jpeg"
                        :show-file-list="true"
                        :before-remove="beforeRemove"
                        :on-exceed="handleExceed"
                        :http-request="handleRequest">
                        <el-button size="small" type="success">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">
                            只能上传图片文件格式，最好是1比1的图片尺寸，文件不能超过5M<br/>
                        </div>
                    </el-upload>
                    <div class="form-tips">{{ modifyAvatarTips }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyAvatarDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="modifyAvatarConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择模版" :visible.sync="templateDialogVisible">
            <el-table :data="templateList" size="small" header-cell-class-name="tableHeaderStyle">
                <el-table-column prop="templateId" width="80px" label="模版ID"></el-table-column>
                <el-table-column prop="userVersion" width="80px" label="版本号"></el-table-column>
                <el-table-column prop="createTime" width="150px" :formatter="formatTimestamp"
                                 label="提交时间"></el-table-column>
                <el-table-column prop="templateType" :formatter="formatType" width="80px"
                                 label="模版类型"></el-table-column>
                <el-table-column prop="auditStatus" width="100px" :formatter="formatTemplateAuditStatus"
                                 label="审核状态"></el-table-column>
                <el-table-column prop="userDesc" label="模版描述"></el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    align="center"
                    width="80px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="templateSelect(scope.row)" type="text" size="small">
                                选择
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="templateDialogVisible = false" size="small">关 闭</el-button>
            </div>
            <el-dialog title="编辑版本信息" :visible.sync="trialDialogVisible" append-to-body>
                <el-form :model="trialForm" label-width="120px" size="small">
                    <el-form-item label="模板ID">
                        <el-input v-model="trialForm.templateId"
                                  disabled
                                  placeholder="模板ID"
                                  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="额外参数">
                        <el-input v-model="trialForm.extJson" type="textarea"
                                  placeholder="额外参数"></el-input>
                        <el-link type="primary"
                                 href="https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/code-management/commit.html"
                                 target="_blank">
                            查看说明
                        </el-link>
                        <div class="form-tips">如果小程序没有地理位置权限，请输入：{"requiredPrivateInfos": []}</div>
                    </el-form-item>
                    <el-form-item label="体验版版本号">
                        <el-input v-model="trialForm.trialVersion"
                                  placeholder="体验版版本号"></el-input>
                    </el-form-item>
                    <el-form-item label="体验版描述信息">
                        <el-input v-model="trialForm.trialDesc"
                                  type="textarea"
                                  placeholder="体验版描述信息"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="trialDialogVisible = false" size="small">取 消</el-button>
                    <el-button @click="templateSelectConfirm" type="primary" size="small">确 定</el-button>
                </div>
            </el-dialog>
        </el-dialog>

        <el-dialog title="提交审核" :visible.sync="auditDialogVisible">
            <el-form :model="auditForm" label-width="150px" size="small">
                <el-form-item label="正式版描述信息">
                    <el-input v-model="auditForm.auditDesc"
                              type="textarea"
                              placeholder="正式版描述信息"></el-input>
                </el-form-item>
                <el-form-item label="隐私接口未使用申明">
                    <el-switch v-model="auditForm.privacyApiNotUse"></el-switch>
                </el-form-item>
                <el-form-item label="审核通过后自动发布">
                    <el-switch v-model="auditForm.autoRelease"></el-switch>
                </el-form-item>
                <div v-if="latestVersion">
                    <span class="el-form-item__label" style="margin-top: -15px; text-decoration: underline; color: red">
                        您正在提交体验版本{{
                            latestVersion.trialVersion
                        }}到正式版审核，所采用的模版ID为{{ latestVersion.templateId }}，请确认！
                    </span>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="auditDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="submitAuditConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="域名管理" :visible.sync="domainDialogVisible">
            <el-form :model="domainForm" label-width="120px" size="small">
                <el-form-item label="Request域名">
                    <el-input v-model="domainForm.requestDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔"></el-input>
                </el-form-item>
                <el-form-item label="Socket域名">
                    <el-input v-model="domainForm.socketDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔，请以wss://开头"></el-input>
                </el-form-item>
                <el-form-item label="Upload域名">
                    <el-input v-model="domainForm.uploadDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔"></el-input>
                </el-form-item>
                <el-form-item label="Download域名">
                    <el-input v-model="domainForm.downloadDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔"></el-input>
                </el-form-item>
                <el-form-item label="UDP域名">
                    <el-input v-model="domainForm.udpDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔，请以udp://开头"></el-input>
                </el-form-item>
                <el-form-item label="TCP域名">
                    <el-input v-model="domainForm.tcpDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔，请以tcp://开头"></el-input>
                </el-form-item>
                <el-form-item label="Webview域名">
                    <el-input v-model="domainForm.webviewDomain" :rows="1" type="textarea"
                              placeholder="Request域名，多个域名请用英文分号;分隔"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="domainDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="domainConfigConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="新增插件" width="40%" :visible.sync="pluginDialogVisible">
            <el-form :model="pluginForm" label-width="120px" size="small">
                <el-form-item label="插件APP_ID">
                    <el-input v-model="pluginForm.appId"
                              placeholder="请输入插件APP_ID"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pluginDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="bindPlugin" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择图片" width="70%" :visible.sync="selectAlbumDialogVisible" append-to-body>
            <album ref="albumSelect" size="small" @select="onSelectAlbum" mode="select"></album>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addMnpTrialUser,
    applyMnpLocationPrivacy,
    bindMnpPlugins,
    commitMnpTrial,
    deleteMnpSubscribeTemplate,
    deleteMnpVersion,
    deleteMpInfo,
    getAuditQuota,
    getMnpDetailByMpId,
    getMnpLocationPrivacy,
    getMnpPlugins,
    getMnpSettingByMpId,
    getMnpSettingCategories,
    getMnpSubscribeTemplates,
    getMnpTrialCode,
    getMnpVersionByPage,
    getMpInfoById,
    getTemplateList,
    modifyMnpAvatar,
    modifyMnpName,
    modifyMnpSignature,
    queryMnpAuditStatus,
    quickSetMnpDomain,
    releaseMnp,
    removeMnpTrialUser,
    revokeMnpAudit,
    setMnpCategory,
    setMnpDefaultCategory,
    setMnpDomain,
    setMnpSubscribeTemplates,
    settingMnpPrivacy,
    speedUpMnpAudit,
    submitMnpAudit,
    switchMnpAutoRelease,
    switchMnpSearchStatus,
    switchMnpVisitStatus,
    syncMnpSubscribeTemplates,
    unbindMnpPlugins,
    updateMnpSettingInfo
} from '@/api/api'
import TablePopover from "@/component/single/TablePopover";
import MediaShow from "@/component/single/MediaShow";
import Album from "@/component/Album";

export default {
    name: "MiniProgramDetail",
    components: {TablePopover, MediaShow, Album},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 100,
                total: 0,
                search: {}
            },
            // 小程序信息
            miniProgramInfo: {},
            // 小程序ID
            id: '',
            // 小程序详情
            mnpDetail: {},
            // 小程序设置信息
            mnpSettingInfo: {},

            // 小程序类目信息
            mnpCategoryInfo: {
                categories: [],
                categoryLimit: '',
                limit: '',
                quota: '',
            },
            mnpCategories: [],
            mnpLocationInterfaces: [],
            setCategoryDialogVisible: false,
            setCategoryForm: {},
            setCategoryTips: '',

            modifyNameDialogVisible: false,
            modifyNameForm: {},
            modifyNameTips: '',

            modifyAvatarDialogVisible: false,
            modifyAvatarForm: {},
            modifyAvatarTips: '',

            // 版本信息
            versionData: [],
            // 最新的版本信息
            latestVersion: {},

            // 模版选择对话框
            templateDialogVisible: false,
            templateList: [],

            // 提交体验版
            trialDialogVisible: false,
            trialForm: {
                id: '',
                templateId: '',
                extJson: '',
                trialVersion: '',
                trialDesc: '',
            },

            // 提交正式版审核对话框
            auditDialogVisible: false,
            auditForm: {
                id: '',
                auditDesc: '',
                privacyApiNotUse: false,
                autoRelease: true,
            },

            // 域名对话框
            domainDialogVisible: false,
            domainForm: {},

            // 相册选择对话框
            selectAlbumDialogVisible: false,
            selectedAlbum: [],

            // 功能设置
            funcDialogVisible: false,
            funcForm: {},

            // 隐私权限（地理位置）
            applyLocationDialogVisible: false,
            applyLocationForm: {},

            // 订阅消息
            subscribeMessageTemplates: [],

            // 插件信息
            plugins: [],
            pluginDialogVisible: false,
            pluginForm: {},

            // 当前tab名称
            activeName: 'version',
        }
    },
    methods: {
        // 显示二维码
        showQrcode() {
            window.open('javascript:window.name;', '<script>location.replace("' + this.miniProgramInfo.qrcodeUrl + '")<\/script>');
        },
        onSelectAlbum(row) {
            this.selectedAlbum = row;
            this.selectAlbumDialogVisible = false;
            this.setCategoryForm.url = row.url;
            this.setCategoryForm.size = row.size;
        },
        funcSet() {
            this.funcDialogVisible = true;
            // 深拷贝
            this.funcForm = Object.assign({}, this.mnpSettingInfo);
        },
        funcSetConfirm() {
            updateMnpSettingInfo(this.funcForm).then(data => {
                if (data.respCode == 1000) {
                    this.funcDialogVisible = false;
                    this.getSettingData();
                }
            })
        },
        applyLocation(row) {
            this.applyLocationDialogVisible = true;
            this.applyLocationForm.mpId = this.id;
            this.applyLocationForm.apiName = row.apiName;
        },
        applyLocationConfirm() {
            applyMnpLocationPrivacy(this.applyLocationForm).then(data => {
                if (data.respCode == 1000) {
                    this.applyLocationDialogVisible = false;
                    this.getLocationData();
                }
            })
        },
        // 同步订阅消息模版
        syncSubscribeTemplate() {
            this.$confirm('该操作会同步小程序的订阅消息模版, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                syncMnpSubscribeTemplates({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                        this.getSubscribeMessageTemplates();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 一键设置订阅消息模版
        setSubscribeTemplate() {
            this.$confirm('该操作会将系统预设订阅消息模版同步至小程序里面, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                setMnpSubscribeTemplates({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                        this.getSubscribeMessageTemplates();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 删除订阅消息模版
        onDeleteSubscribeTemplate(row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMnpSubscribeTemplate({"mpId": this.id, "priTmplId": row.priTmplId}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getSubscribeMessageTemplates();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        setCategory() {
            this.setCategoryDialogVisible = true;
            this.setCategoryForm.mpId = this.id;
        },
        setCategoryConfirm() {
            setMnpCategory(this.setCategoryForm).then(data => {
                if (data.respCode == 1000) {
                    this.setCategoryDialogVisible = false;
                    this.getCategoryData();
                }
            })
        },
        // 设置默认类目
        setDefaultCategory() {
            this.$confirm('系统将会设置默认的类目（商业服务->软件/建站/技术开发）到小程序, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                setMnpDefaultCategory({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                        this.getCategoryData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 改变访问状态
        changeVisitStatus(val) {
            switchMnpVisitStatus({"mpId": this.id}).then(res => {
                this.getDetailData();
            })
        },
        // 改变搜索状态
        changeSearchStatus(val) {
            switchMnpSearchStatus({"mpId": this.id}).then(res => {
                this.getDetailData();
            })
        },
        // 域名配置
        domainConfig() {
            this.domainDialogVisible = true;
            // 深拷贝
            this.domainForm = Object.assign({}, this.mnpDetail);
        },
        // 域名配置确认
        domainConfigConfirm() {
            setMnpDomain(this.domainForm).then(data => {
                if (data.respCode == 1000) {
                    this.domainDialogVisible = false;
                    this.getDetailData();
                }
            })
        },
        // 快速配置域名
        quickConfigDomain() {
            quickSetMnpDomain({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.getDetailData();
                }
            })
        },
        handleRequest(file) {
            // 手动上传，把文件对象赋值给表单里面的对象
            this.modifyAvatarForm.file = file.file;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        formatBoolean: function (row, column, cellValue) {
            if (cellValue == undefined) {
                return '';
            }
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatCategoryStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == '1') {
                return "审核中";
            } else if (cellValue == '2') {
                return "审核不通过";
            } else if (cellValue == '3') {
                return "审核通过";
            } else {
                return "未知";
            }
        },
        formatPrivacyStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == '1') {
                return "待申请开通";
            } else if (cellValue == '2') {
                return "无权限";
            } else if (cellValue == '3') {
                return "申请中";
            } else if (cellValue == '4') {
                return "申请失败";
            } else if (cellValue == '5') {
                return "已开通";
            } else {
                return "未知";
            }
        },
        formatTemplateType: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == 2) {
                return "一次性订阅";
            } else if (cellValue == 3) {
                return "长期订阅";
            } else {
                return "未知";
            }
        },
        formatPluginStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == 1) {
                return "申请中";
            } else if (cellValue == 2) {
                return "申请通过";
            } else if (cellValue == 3) {
                return "申请被拒";
            } else if (cellValue == 4) {
                return "申请超时";
            } else {
                return "未知";
            }
        },
        formatAuditStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == '0') {
                return "审核成功";
            } else if (cellValue == '1') {
                return "审核被拒";
            } else if (cellValue == '2') {
                return "审核中";
            } else if (cellValue == '3') {
                return "已撤回";
            } else if (cellValue == '4') {
                return "审核延后";
            } else {
                return "未知";
            }
        },
        formatReleaseStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return cellValue;
            }
            if (cellValue == '0') {
                return "未发布";
            } else if (cellValue == '1') {
                return "已发布";
            } else {
                return "未知";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == 0) {
                return "普通模版";
            } else if (cellValue == 1) {
                return "标准模版";
            } else {
                return "未知";
            }
        },
        formatTemplateAuditStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == 0) {
                return "未提审核";
            } else if (cellValue == 1) {
                return "审核中";
            } else if (cellValue == 2) {
                return "审核驳回";
            } else if (cellValue == 3) {
                return "审核通过";
            } else if (cellValue == 4) {
                return "提审中";
            } else if (cellValue == 5) {
                return "提审失败";
            } else {
                return "未知";
            }
        },
        formatTimestamp: function (row, column, cellValue) {
            return this.GLOBAL.timestampFormat(cellValue);
        },
        handleSizeChange(val) {
            this.getVersionData();
        },
        handleCurrentChange(val) {
            this.getVersionData();
        },
        modifySignature() {
            let obj = JSON.parse(this.miniProgramInfo.accountBasicInfo);
            let signatureInfo = obj.signature_info;
            let total = signatureInfo.modify_quota;
            let used = signatureInfo.modify_used_count;
            let msg = "本月修改介绍信息总额度" + total + "，本月已使用额度" + used + "，本月剩余额度" + (total - used);
            this.$prompt(msg, '请输入小程序介绍信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({value}) => {
                let data = {
                    id: this.id,
                    signature: value
                }
                modifyMnpSignature(data).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.getInfoData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消修改'
                });
            });
        },
        addTrialUser() {
            this.$prompt('请输入用户微信号', '添加体验用户', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({value}) => {
                let params = {
                    mpId: this.id,
                    wechatId: value
                }
                addMnpTrialUser(params).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.getDetailData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消修改'
                });
            });
        },
        removeTrialUser: function (user) {
            user.mpId = this.id;
            this.$confirm('请确认是否移除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeMnpTrialUser(user).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '移除成功!'
                        });
                        this.getDetailData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 删除小程序
        deleteMnp() {
            this.$confirm('该操作高危，会清除跟该小程序相关的一切信息, 且不可恢复，请确认是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMpInfo({id: this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.goBack();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        modifyName() {
            this.modifyNameDialogVisible = true;
            this.modifyNameForm = {id: this.id};

            let obj = JSON.parse(this.miniProgramInfo.accountBasicInfo);
            let nicknameInfo = obj.nickname_info;
            let total = nicknameInfo.modify_quota;
            let used = nicknameInfo.modify_used_count;
            this.modifyNameTips = "本年度修改名称总额度" + total + "，本年度已使用额度" + used + "，本年度剩余额度" + (total - used);
        },
        modifyNameConfirm() {
            modifyMnpName(this.modifyNameForm).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.modifyNameDialogVisible = false;
                    this.getInfoData();
                }
            })
        },
        modifyAvatar() {
            this.modifyAvatarDialogVisible = true;
            this.modifyAvatarForm = {id: this.id};

            let obj = JSON.parse(this.miniProgramInfo.accountBasicInfo);
            let headImageInfo = obj.head_image_info;
            let total = headImageInfo.modify_quota;
            let used = headImageInfo.modify_used_count;
            this.modifyAvatarTips = "本年度头像修改总额度" + total + "，本年度已使用额度" + used + "，本年度剩余额度" + (total - used);
        },
        modifyAvatarConfirm() {
            // 一定要先手动触发上传
            this.$refs.upload.submit();
            // 判断图片格式
            if (!this.GLOBAL.isImage(this.modifyAvatarForm.file, this)) {
                return;
            }
            // 一定要变成formData格式，后端不能用@RequestBody接收
            let formData = new FormData();
            Object.keys(this.modifyAvatarForm).forEach((key) => {
                formData.append(key, this.modifyAvatarForm[key]);
            });
            modifyMnpAvatar(formData).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.modifyAvatarDialogVisible = false;
                    this.getInfoData();
                }
                // 清空文件列表
                this.$refs.upload.clearFiles();
            })
        },
        trial() {
            this.templateDialogVisible = true;
            this.getTemplateList();
        },
        templateSelect: function (row) {
            this.trialDialogVisible = true;
            this.trialForm.templateId = row.templateId;
            this.trialForm.trialVersion = row.userVersion;
            this.trialForm.trialDesc = row.userDesc;
        },
        templateSelectConfirm: function () {
            this.trialForm.id = this.id;
            commitMnpTrial(this.trialForm).then(data => {
                if (data.respCode == 1000) {
                    this.trialDialogVisible = false;
                    this.templateDialogVisible = false;
                    this.getVersionData();
                }
            })
        },
        getTrialCode: function () {
            getMnpTrialCode({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    window.open(data.body.qrcodeUrl, '_blank');
                }
            });
        },
        // 设置隐私保护
        settingPrivacy: function () {
            settingMnpPrivacy({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        message: '设置成功',
                        type: 'success'
                    })
                }
            });
        },
        // 提交审核对话框
        submitAudit: function () {
            this.auditDialogVisible = true;
            this.auditForm.mpId = this.id;
            this.auditForm.auditDesc = this.latestVersion.trialDesc;
        },
        // 提交审核确认
        submitAuditConfirm: function () {
            submitMnpAudit(this.auditForm).then(data => {
                if (data.respCode == 1000) {
                    this.getVersionData();
                    this.auditDialogVisible = false;
                }
            })
        },
        // 查询审核状态
        queryAuditStatus: function () {
            queryMnpAuditStatus({"mpId": this.id}).then(res => {
                this.getVersionData();
            })
        },
        // 发布
        release: function () {
            this.$confirm('系统将会把最新审核通过的版本发布到线上, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                releaseMnp({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '发布成功!'
                        });
                        this.getVersionData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 撤回审核
        revokeAudit: function () {
            this.$confirm('请确定是否要将正在审核版本的撤回, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                revokeMnpAudit({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '撤回成功!'
                        });
                        this.getVersionData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 加急审核
        speedUpAudit: function () {
            getAuditQuota({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    let result = data.body;
                    let msg = "当前服务商普通审核额度本月总共有" + result.limit + "次，剩余" + result.rest + "次；加急审核额度" +
                        result.speedupLimit + "次，剩余" + result.speedupRest + "次；请确定是否加急?"
                    this.$confirm(msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        speedUpMnpAudit({"mpId": this.id}).then(data => {
                            if (data.respCode == 1000) {
                                this.$message({
                                    type: 'success',
                                    message: '加急成功!'
                                });
                                this.getVersionData();
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            })
        },
        // 切换自动发布
        switchAutoRelease: function (row) {
            switchMnpAutoRelease({"id": row.id}).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '设置成功!'
                    });
                    this.getVersionData();
                }
            })
        },
        // 删除版本
        onDeleteVersion: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMnpVersion({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getVersionData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 绑定插件
        bindPlugin: function () {
            if (!this.pluginForm.appId) {
                this.$message({
                    type: 'error',
                    message: '请先输入插件APP_ID!'
                });
                return;
            }
            bindMnpPlugins({"mpId": this.id, "pluginAppId": this.pluginForm.appId}).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '绑定成功!'
                    });
                    this.pluginForm = false;
                    this.getPlugins();
                }
            })
        },
        // 解绑插件
        unbindPlugin: function (row) {
            this.$confirm('请确认是否解绑, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                unbindMnpPlugins({"mpId": this.id, "pluginAppId": row.appid}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getPlugins();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 升级插件
        updatePlugin: function (row) {
            this.$message({
                type: 'info',
                message: '功能正在开发中'
            });
        },
        // 获取数据
        getData: function () {
            this.getInfoData();
            this.getDetailData();
            this.getVersionData();
            this.getSettingData();
            this.getCategoryData();
            this.getLocationData();
            this.getSubscribeMessageTemplates();
            this.getPlugins();
        },
        // 获取基础数据
        getInfoData: function () {
            getMpInfoById({"id": this.id}).then(data => {
                this.miniProgramInfo = data.body;
            });
        },
        // 获取详情数据
        getDetailData: function () {
            getMnpDetailByMpId({"mpId": this.id}).then(data => {
                this.mnpDetail = data.body;
                if (this.mnpDetail.trialUsers) {
                    this.mnpDetail.trialUsers = JSON.parse(this.mnpDetail.trialUsers);
                }
            })
        },
        // 获取设置数据
        getSettingData() {
            getMnpSettingByMpId({"mpId": this.id}).then(data => {
                this.mnpSettingInfo = data.body;
            })
        },
        // 获取类目信息
        getCategoryData() {
            getMnpSettingCategories({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.mnpCategoryInfo = data.body;
                    this.mnpCategories = data.body.categories;
                    this.setCategoryTips = "本月度修改类目总额度" + this.mnpCategoryInfo.limit + "，本月度剩余修改次数" + this.mnpCategoryInfo.quota + "，最多可以设置" + this.mnpCategoryInfo.categoryLimit + "个类目";
                }
            })
        },
        // 获取订阅消息模版
        getSubscribeMessageTemplates() {
            getMnpSubscribeTemplates({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.subscribeMessageTemplates = data.body;
                }
            })
        },
        // 获取插件列表
        getPlugins() {
            getMnpPlugins({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.plugins = data.body;
                }
            })
        },
        // 获取地理位置权限
        getLocationData() {
            getMnpLocationPrivacy({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.mnpLocationInterfaces = data.body.interfaceList;
                }
            })
        },
        // 获取版本信息
        getVersionData: function () {
            this.condition.search.mpId = this.id;
            getMnpVersionByPage(this.condition).then(data => {
                this.versionData = data.body.rows;
                this.condition.total = data.body.total;
                this.latestVersion = this.versionData[0];
            });
        },
        // 获取模版列表
        getTemplateList: function () {
            let appId = this.miniProgramInfo.componentAppId;
            getTemplateList({"appId": appId}).then(data => {
                this.templateList = data.body.templateList;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
